<template>
  <div>
    <!-- 圆弧淡蓝区域 -->
    <div class="topnavAndBanner">
      <Topnav />
      <div class="banner">
        <h1>VUE UI</h1>
        <h2>a good UI frank</h2>
        <p class="actions">
          <a>GitHub</a>
          <router-link to="/doc">开始</router-link>
        </p>
      </div>
    </div>
    <!-- 文档概要 -->
    <div class="features">
      <div>
        <svg class="icon">
          <use xlink:href="#icon-Vue" />
        </svg>
        <h4>基于Vue 3</h4>
        <p>骄傲的使用了Vue 3 Composition API</p>
      </div>
      <div>
        <svg class="icon">
          <use xlink:href="#icon-ts" />
        </svg>
        <h4>基于TypeScript</h4>
        <p>源代码采用TypeScript书写(非严格检查)</p>
      </div>
      <div>
        <svg class="icon">
          <use xlink:href="#icon-dengpao" />
        </svg>
        <h4>代码易读</h4>
        <p>每个组件的源代码都极其简洁</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Topnav from "../components/Topnav.vue";
export default {
  components: { Topnav },
};
</script>
<style lang="scss" scoped>
$green: #02bcb0;
$color: #34a7a1;
.topnavAndBanner {
  // height: 50vh;
  background: rgb(227, 255, 253);
  background: linear-gradient(
    145deg,
    rgba(227, 255, 253, 1) 0%,
    rgba(183, 233, 230, 1),
    100%
  );
  clip-path: ellipse(80% 60% at 50% 40%);
  .banner {
    color: $color;
    padding-top: 40vh;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    h1 {
      transform: translateY(-280%);
    }
    h2 {
      transform: translateY(-280%);
    }
    .actions {
      transform: translateY(-280%);
      a {
        background: $green;
        border-radius: 15px;
        padding: 5px 10px;
        margin-right: 10px;
        color: white;

      }
    }
  }
}
.features {
  margin-top: 160px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  > div {
    display: grid;
    width: 380px;
    grid-template: repeat(2,100px)/(100px,1fr);
    padding: 10px 10px;
      align-items: center;
    > svg {
      width: 64px;
      height: 64px;
      grid-row: 1/span 2;
      grid-column: 1/span 1;
      margin-right: 2rem;
    }
    >h4{
      grid-row: 1/span 1;
      grid-column: 2/span 1;
      justify-self: flex-start;
    }
    >p{
      grid-row: 2/span 1;
      grid-column: 2/span 1;
      font-size: 12px;
      justify-self: flex-start;
      width: 300px;

    }
  }
}
</style>